<mat-card class="material-card-sm">
    <form role="form" novalidate [formGroup]="imageForm" (ngSubmit)="saveImage()">
        <div class="mb-3">
            <mat-form-field class="material-input-full">
                <input matInput placeholder="Image Title" formControlName="imageTitle">
                <mat-error>
                    <control-messages [isSubmitted]="isSubmitted" [control]="imageForm.controls['imageTitle']"></control-messages>
                </mat-error>
            </mat-form-field>
        </div>
        <div class="mb-3">
            <mat-form-field class="material-input-full">
                <input matInput placeholder="Image Alternate Text" formControlName="imageAltText">
                <mat-error>
                    <control-messages [isSubmitted]="isSubmitted" [control]="imageForm.controls['imageAltText']"></control-messages>
                </mat-error>
            </mat-form-field>
        </div>
        
        <div class="mb-3">
          <image-uploader [isSubmitted]="isSubmitted" [canvasSize]="canvasSize"
                          [imageFormControl]="imageFormControl"
                          (deleteImageEvent)="deleteImage($event)"
                          [imageName]="fileName" [drawImagePath]="drawImagePath"
                          [isSubmitted]="isSubmitted"
                          allowDelete="true"
                          (fileSelectedEvent)="changeFile($event)"></image-uploader>
        </div>
        <div class="mb-3">
            <mat-checkbox formControlName="active">
                Active
            </mat-checkbox>
        </div>
        <div class="mb-3">
            <button mat-raised-button color="primary" type="submit">Save</button>
            <button mat-raised-button color="warn" type="button" (click)="triggerCancelForm()">Cancel</button>
        </div>
    </form>
</mat-card>
